(function ($) {
    $.select=function(box,addInputClass){
        var i=new select;
        return i.init(box,addInputClass)
    }
//声明多级联动 方法类
    var select = new Function();
    select.prototype={
//定义类属性
        init:function(box,addInputClass){
            this.boxName=box;
            this.box=$('#'+box); //需要添加元素的容器
            this.eleClass=addInputClass;//每个事件的定位class
            this.first();//新建一个select获取
        },
        first:function(){
//声明外部变量
            var boxName=this.boxName;
            var eleClass= this.eleClass;
            var box=this.box;
            var obj=this;
            $.get("./areas.php", {id:'0'},
                function(data){
                    var option="<option value=''>请选择</option>";
                    var list=data.data;
                    for(var key in list){
                        option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
                    }
                    $('<div class="col-md-2 pl0"><select name="'+eleClass+'[]" num="0" pnode="'+boxName+'" cname="'+eleClass+'" class="form-control input-sm '+eleClass+'">'+option+'</select></div>').appendTo(box).find('select').bind('change',function(){obj.change($(this))});
                },'jsonp');
        },
//change事件
        change:function(event){
//声明
            var boxName=$(event).attr('pnode'); //获取触发事件者的pnode
            var className=$(event).attr('cname');//获取触发事件者的cname
            var box =$("#"+boxName); //获取所有插入盒子的对象
            var eleClass=$("."+className); //获取所有Class所在元素组
            var num=eleClass.index($(event))+1; //获取num的值
            var id=$(event).val(); //获取ajax发送id的头
            var obj=this; //代表这个方法
//清除 后续添加的新的元素
            eleClass.each(function(){
//这里的this 代表eleClass 遍历时的单个对象
//console.log($(this).attr('num'));
//console.log($().attr('num'));
                if($(this).attr('num')>$(event).attr('num')){
                    $(this).parent().remove();
                }
            });
            /*
            console.log(boxName);
            console.log(className);
            console.log($(event));
            console.log($(event).val());
            */
//循环ajax方法
            $.ajax({
                type: "get",
                dataType:"jsonp",
                url: "./areas.php",
                data: {id:id},
                sync: false,//设置为同步
                success: function(data){
//console.log(data);
                    var list =data.data
                    if(data.state==='1'){
                        var option=`<option value=''>请选择</option>`;
                        for(var key in list){
                            option+=`<option value='"+key+"'>`+list[key].areaname+`</option>`;
                        }
                        $(`<div class="col-md-2 pl0"><select name="`+className+`[]" num="`+num+`" pnode="`+boxName+`" cname="`+className+`" class="form-control input-sm '+className+'" >`+option+`</select></div>`).appendTo(box).find('select').bind('change',function(){obj.change(this)});
                    }
                }
            });
        },
//查询当前盒子中的信息
        log:function(){
            var boxName=$(event).attr('pnode'); //获取触发事件者的pnode
            var className=$(event).attr('cname');//获取触发事件者的cname
            var box =$("#"+boxName); //获取所有插入盒子的对象
            var eleClass=$("."+className); //获取所有Class所在元素组
            console.log("容器名:"+boxName+"\n 触发的class名:"+className);
        },
//第一个select框获取信息
        getFirstElement:function(){
            var main=$('#'+this.main);
            $.get("./areas.php", {id:'0'},
                function(data){
                    var option="<option value=''>请选择</option>";
                    var list=data.data;
                    for(var key in list){
                        option+="<option value='"+key+"'>"+list[key].areaname+"</option>";
                    }
                    main.html(option);
                },'jsonp');
        }
    }
})(jQuery)